<template>
  <div class="project-bar-data">
    <div
      id="line-data-box"
      class="data-box"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "ProjectLineData",
  props: {
    msg: String,
  },
  data() {
    return {};
  },
  created() {
    this.$nextTick(() => {
      this.generateChart();
    });
  },
  methods: {
    generateChart() {
      let rentalEchart = echarts.init(document.getElementById("line-data-box"));
      let option = this.generateOptions();
      rentalEchart.setOption(option);
    },
    generateOptions() {
      let xData = [];
      for (let i = 1; i <= 12; i++) {
        xData.push(i + "月");
      }
      let option = {
        title: {
          text: "年度工程数据",
          left: "left",
          top: "5%",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: xData,
          axisTick: {
            alignWithLabel: true,
          },
        },
        // legend: {
        //   orient: "vertical",
        //   x: "left",
        //   y: "top",
        //   textStyle: {
        //     fontSize: 12,
        //   },
        //   data: ["工程量", "合同造价", "开工量", "竣工量"],
        // },
        legend: {
          top: "5%", //调整位置
          right: 0, //调整位置
          // orient: "vertical",
          // left: "center",
          // bottom: "bottom",
          itemWidth: 15,
          itemHeight: 5,
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
          data: ["工程量", "合同造价", "开工量", "竣工量"],
        },
        yAxis: {
          type: "value",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        series: [
          {
            name: "工程量",
            type: "line",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: [320, 332, 301, 334, 390],
          },
          {
            name: "合同造价",
            type: "line",
            emphasis: {
              focus: "series",
            },
            data: [220, 182, 191, 234, 290],
          },
          {
            name: "开工量",
            type: "line",
            emphasis: {
              focus: "series",
            },
            data: [150, 232, 201, 154, 190],
          },
          {
            name: "竣工量",
            type: "line",
            emphasis: {
              focus: "series",
            },
            data: [98, 77, 101, 99, 40],
          },
        ],
      };

      return option;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.project-bar-data {
  width: 100%;
  height: 200px;
  padding: 15px;
  box-sizing: border-box;
  background: #ffffff;
  box-sizing: border-box;
}
.data-box {
  width: 100%;
  height: 100%;
}
</style>
